<script>
import CustomButton from '@/components/button/index.vue';
import { ref } from 'vue';
export default {
  name: 'SearchBox',
  components: {
    CustomButton,
  },
  props: {
    content: {
      type: String,
      default: '请输入搜索的内容'
    },
    label: {
      type: String,
      default: '搜索'
    },
    search: {
      type: Function,
      default: () => {
        console.log('搜索');
      }
    }
  },
  setup() {
    const input = ref('');
    return {
      input,
    }
  }
}
</script>

<template>
  <div class="search-box">
    <el-input v-model="input" :placeholder="content"></el-input>
    <CustomButton :label="label"@click="$props.search"></CustomButton>
  </div>
</template>

<style scoped>
.search-box {
  width: 100px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-input__inner {
  height: 100%;
  width: 70%;
}

.el-button {
  width: 20%;
  height: 70%;
  margin-left: 10%;
}

</style>

